<!--  -->
<template>
  <div class="dialog-ip4">
    <el-dialog title="编辑IP黑名单" :visible.sync="dialogShow" :close-on-click-modal="false">
      <div class="add-container-u">
        <el-form>
          <el-form-item label="IP地址：" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-input
              type="textarea"
              :rows="8"
              placeholder="请输入IP"
              v-model="iplist">
            </el-input>
            <div class="note">支持任意IP，如：10.10.10.10，多IP使用换行进行分隔，最多添加2000个IP。</div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">关闭</el-button>
        <el-button size="small" type="primary" @click="saveclose">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    blacklist: {
      type: Array
    },
    resetData: {
      type: Function
    }
  },
  created () {
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      iplist: ''
    }
  },
  watch: {
  },
  methods: {
    show () {
      this.dialogShow = true
      this.iplist = this.blacklist.join('\n')
    },
    close () {
      this.dialogShow = false
    },
    saveclose () {
      let blacklist
      if (this.iplist) {
        let listold = []
        let listNew = []
        let reg = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
        listold = this.iplist.split('\n')
        listold.forEach(item => {
          if (reg.test(item.replace(/[^\d.]/g, ''))) {
            listNew.push(item.replace(/[^\d.]/g, ''))
          }
        })
        blacklist = [...new Set(listNew)]
      } else {
        blacklist = []
      }
      this.$jpost('/hostip4/update-ip4release-blacklist', JSON.parse(JSON.stringify(blacklist))).then(response => {
        if (response) {
          this.resetData(response)
        }
      })
      this.close()
    }
  },
  components: {
  }
}
</script>

<style scoped lang="scss">
</style>
